<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>影像资料</h2>
      </div>
      <div class="content">
        <div class="user-files" v-for="(item, index) in treeData" :key="item.id">
          <div class="user-files-title">· {{ item.name }}</div>
          <div class="user-files-content">
            <div class="user-files-item" v-for="(sub, subIndex) in item.list" :key="item.id + '_' + sub.key">
              <Upload
                style="opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%"
                accept=".jpg,.jpeg,.png,.gif"
                :maxUploadSize="1"
                :default-file-list="sub.urls ? sub.urls : []"
                listType="picture-card"
                @change="(files) => onUpload(files, index, subIndex)"
              />
              <div class="user-files-item-name">
                {{ sub.value }}
              </div>
              <div class="user-files-item-status" :style="sub.isUpload ? 'color:#6BBA0D;' : 'color:#EE0F0F;'">
                <img v-if="sub.isUpload" src="/@/assets/images/smile.png" alt="" />
                <img v-else src="/@/assets/images/cary.png" alt="" />
                {{ sub.isUpload ? '已提交' : '未提交' }}
              </div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-title">
            <img src="/@/assets/images/detail_title.png" alt="" />
            其他补充资料
          </div>
          <div class="info-content">
            <a-button class="submit" @click="onUpload">上传附件</a-button>
          </div>
        </div>
        <div style="text-align: center">
          <a-button class="submit save">保存</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, reactive } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import Back from '/@/components/go-back/index.vue';
  import Upload from '/@/components/support/file-upload/index.vue';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '../../../store/modules/system/rzApply';
  const rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const treeData = ref([]);

  async function getData() {
    const res = await rzApplyApi.getStructure({ bussNo: rzApplyStore.getBussNo });
    if (res.code == 0) {
      treeData.value = res.data.map((item) => {
        item.list.forEach((element) => {
          element.urls = [];
        });
        return item;
      });
    }
  }
  onMounted(() => {
    getData();
  });
  function onUpload(fileList, index, subIndex) {
    treeData.value[index].list[subIndex].isUpload = 1;
    treeData.value[index].list[subIndex].urls = fileList;
  }
</script>
<style scoped lang="less">
  @import url(../rzApply/index.less);
  .app-page {
    display: flex;
    flex-direction: column;
    h2 {
      font-size: 32rem;
    }
    .content {
      .info-content {
        height: 97rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6rem;
        border: 1rem solid #c7c6c6;
        margin-top: 25rem;
        padding: 0 !important;
        .ant-btn {
          margin-left: 0 !important;
        }
      }
      .submit {
        width: 270rem;
        height: 42rem;
        border-radius: 5rem;
        margin-left: 0;
      }
      .save {
        width: 270rem;
        height: 42rem;
        border-radius: 5rem;
        margin: 43rem auto 40rem;
      }
    }
  }
</style>
